<template>
  <el-menu
    router
    unique-opened
    :collapse-transition="false"
    :collapse="collapse"
    default-active="2"
    class="el-menu-vertical-demo"
    background-color="#333744"
    text-color="#fff"
    active-text-color="#409eff">
    <!-- 一级菜单 -->
    <el-submenu  v-for="obj in menulist" :key="obj.id" :index="obj.id + ''">
      <template slot="title">
        <i :class="iconfont[obj.id]"></i>
        <span>{{ obj.authName }}</span>
      </template>
    <!-- 二级菜单 -->
      <el-menu-item :index="'/'+item.path" v-for="item in obj.children" :key="item.id" >
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>{{ item.authName }}</span>
        </template>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { getMenuListAPI } from '@/api/user.js'

export default {
  props: {
    collapse: {
      type: Boolean,
      required: true
    }
  },

  data () {
    return {
      menulist: [],
      iconfont: {
        125: 'iconfont icon-users',
        103: 'iconfont icon-tijikongjian',
        101: 'iconfont icon-lock_fill',
        102: 'iconfont icon-danju',
        145: 'iconfont icon-baobiao'
      }
    }
  },

  created () {
    this.getMenuList()
  },

  methods: {
    async getMenuList () {
      const { data: res } = await getMenuListAPI()
      // console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取数据失败')
      this.menulist = res.data
    }
  }
}
</script>

<style scoped lang="less">
.el-menu {
  border-right: 0;
  .iconfont {
    padding-right: 6px;
  }
}
</style>
